import React, { PureComponent } from 'react';
import { Card, List, Avatar } from 'antd';
import Link from 'umi/link';
import numeral from 'numeral';
import { ChartCard, MiniArea, MiniBar, MiniProgress } from '@/components/Charts';
import resource from '../resource'

class indicators extends PureComponent {

    constructor(props) {
        super(props)

        const visitdata = [];
        for (let i = 11; i >= 0; i--) {
            let myDate = new Date()
            myDate.setMonth(myDate.getMonth() - i);

            visitdata.push({
                "x": `${myDate.getFullYear()}-${myDate.getMonth() + 1}`,
                "y": numeral(10 + Math.random()).format("0.0")
            });
        }

        this.state = {
            visitdata
        }
    }

    render() {
        const { visitdata } = this.state;

        const indicators_data = [
            {
                name: '累计节能量',
                avatar: resource.icon.jienenghuanbao,
                value: 656,
                unit: 't',
            },
            {
                name: '累计减排CO2',
                avatar: resource.icon.eryanghuatannongdu,
                value: 656,
                unit: 't',
            },
            {
                name: '累计利润',
                avatar: resource.icon.profit,
                value: 656,
                unit: '万元',
            },
            {
                name: '累计发电小时',
                avatar: resource.icon.gfypt,
                value: 656,
                unit: 'h',
            },
            {
                name: '累计制冷天数',
                avatar: resource.icon.zhileng,
                value: 656,
                unit: '天',
            },
            {
                name: '累计供热天数',
                avatar: resource.icon.nuanqi,
                value: 656,
                unit: '天',
            }
        ];

        console.log(indicators_data);

        return (
            <Card size="small">
                <List size="small" grid={{
                    gutter: 16, xs: 1,
                    sm: 1,
                    md: 6,
                    lg: 6,
                    xl: 6,
                    xxl: 6
                }} 
                dataSource={indicators_data}
                renderItem={item => (
                <List.Item style={{ padding: '0' }}>
                    <List.Item.Meta
                        avatar={<Avatar shape="square" src={`${item.avatar}`} />}
                        title={<span>{item.name} {item.value} <small>{item.unit}</small></span>}
                        description={<MiniBar data={visitdata} color="#26B99A" />}
                    />
                </List.Item>
                  )}
                >
                </List>
            </Card>
        );
    }
}

export default indicators;
